<template>
  <el-row>
    <template v-for="meta in metas" :key="meta.name">
      <el-col
        :span="20 / metas.length"
        v-if="!meta.is || meta.is(this.formData, formIndex)"
      >
        <form-item
          :hiddenLabel="true"
          :formData="currentFormData"
          v-model="currentFormData[meta.name]"
          :keyIndex="formIndex"
          :meta="meta"
          :dictListFun="meta.dictListFun"
        ></form-item>
      </el-col>
    </template>
    <div class="_m-l-10">
      <el-button type="danger" circle v-if="arrLen > 1" @click="removeItem"
        ><el-icon><Minus /></el-icon
      ></el-button>
      <el-button
        type="primary"
        circle
        v-if="arrLen == formIndex + 1"
        @click="pushItem"
        ><el-icon><Plus /></el-icon
      ></el-button>
    </div>
  </el-row>
</template>

<script>
import FormItem from "./form-item.vue";

export default {
  components: { FormItem },
  props: {
    metas: {
      type: Array,
      require: true,
    },
    formData: {
      type: Object,
      require: true,
    },
    formIndex: {
      type: Number,
      default: 0,
    },
    arrLen: {
      type: Number,
      default: 1,
    },
    removeItem: {
      type: Function,
      require: true,
    },
    pushItem: {
      type: Function,
      require: true,
    },
  },
  data() {
    return {
      currentFormData: this.formData,
    };
  },
  watch: {
    formData: {
      deep: true,
      async handler(newFormData) {
        Object.assign(this.currentFormData, newFormData);
      },
    },
    currentFormData: {
      deep: true,
      handler() {
        this.$emit("update:formData", {
          ...this.formData,
          ...this.currentFormData,
        });
      },
    },
  },
};
</script>

<style scoped></style>
